<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            border:20px solid #ccc;
            margin: 10px;
            padding:40px;
            background: #eee;
            width: 500px;
            height: 600px;
            overflow: scroll;
        }
        #mdiv{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="mdiv">
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
    sfggfs <br>
</div>
<script type="text/javascript">
    console.log("document.body.clientWidth-------->"+document.body.clientWidth);
    console.log("document.body.clientHeight-------->"+document.body.clientHeight);

    //clientLeft clientTop 读取元素的border的宽度和高度
    //clientTop=border-top的border-width clientLeft=border-left的border-width
    console.log("document.body.clientLeft-------->"+document.body.clientLeft);
    console.log("document.body.clientTop-------->"+document.body.clientTop);

    //offsetWidth  offsetHeight
    //假如无padding无滚动无border offsetWidth=style.width
    //假如有padding无滚动有border offsetWidth=style.width+style.padding*2+(border-width)*2
    //                            offsetWidth=clientWidth+(border-width)*2
    //假如有padding有滚动,且滚动是显示的 有border offsetWidth=style.width+style.padding*2+(border-width)*2
    //                                           offsetWidth=clientWidth+滚动轴宽度+(border-width)*2
    console.log("document.body.offsetWidth-------->"+document.body.offsetWidth);
    console.log("document.body.offsetHeight-------->"+document.body.offsetHeight);


    //offsetLeft offsetTop

    var mdiv=document.getElementById("mdiv");
    console.log("mdiv.clientWidth-------->"+mdiv.clientWidth);
    console.log("mdiv.clientHeight-------->"+mdiv.clientHeight);
    //假如无padding无滚动 clientWidth=style.width
    //假如有padding无滚动 clientWidth=style.width+style.padding*2
    //假如有padding有滚动,且滚动是显示的 clientWidth=style.width+style.padding*2-滚动轴宽度
</script>
</body>
</html>